<template>
  <view v-if="visible" class="drawer-popup" style="height: 100vh">
    <view class="drawer-mask" @click="closeDrawer" style="height: 100vh"></view>
    <view
      class="drawer-content"
      :class="visible ? 'dialog-fade-enter-active' : 'dialog-fade-leave-active'"
    >
      <view :style="'height:' + statusBarHeight1 + 'px;background: white;'"></view>
      <view class="drawer-header">
        <image
          @click="closeDrawer"
          src="https://pic.bangbangtongcheng.com/static/black-left-arrow.png"
        ></image>
        <span>{{ title + '：' + selectedItems.length + '/3' }}</span>
        <span class="drawer-header-confirm" @click="confirmData()">确定</span>
      </view>
      <view class="drawer-body" style="height: 100vh">
        <view style="background-color: white; border-radius: 20rpx; padding: 25rpx">
          <view class="center" v-show="selectedItems.length > 0">
            <view class="list">
              <view class="label" v-for="(i, j) in selectedItems" :key="j">
                {{ i.split(',')[2] }}
                <image
                  class="image"
                  @click="del(i)"
                  src="https://pic.bangbangtongcheng.com/static/red-close-zhaocai-index.png"
                ></image>
              </view>
            </view>
          </view>
          <!-- <view class="select" :style="'height: calc(100vh - ' + curTop + 'px );'"> -->
          <view class="select">
            <view class="left">
              <scroll-view scroll-y="true" :style="'height: calc(100vh - 180rpx );'">
                <view
                  :class="xuan == j ? 'xuan li' : 'li'"
                  v-for="(i, j) in List"
                  :key="j"
                  @click="xuanzhong(j)"
                >
                  <view class="lableName">
                    {{ i.lableName }}
                  </view>
                  <view class="quantity" v-if="xuan == j">
                    {{ i.quantity }}
                  </view>
                </view>
                <view style="width: 100%; height: 50px" class="li"></view>
              </scroll-view>
            </view>
            <view class="right">
              <scroll-view scroll-y="true" :style="'height: calc(100vh - 180rpx );'">
                <view class="iteam" v-for="(i, j) in List[xuan].children" :key="j">
                  <view class="title">
                    {{ i.lableName }}
                  </view>
                  <view class="label">
                    <view
                      :class="s.active ? 'li xuan' : 'li'"
                      v-for="(s, y) in i.children"
                      :key="y"
                      @click="labelChage(j, y)"
                    >
                      {{ s.lableName }}
                    </view>
                  </view>
                </view>
                <view style="width: 100%; height: 50px"></view>
              </scroll-view>
            </view>
          </view>
        </view>
      </view>
      <view class="drawer-floot"></view>
    </view>
  </view>
</template>

<script>
  import { mapGetters } from 'vuex'
  //#ifdef H5
  import wxshare from '../../utils/index.js'
  //#endif
  export default {
    name: 'job-drawer',
    props: {
      title: {
        type: String,
        default: '选择',
      },
      visible: {
        type: Boolean,
        default: false,
      },
      changes: {
        type: Array,
        default: () => [],
      },
      recruitmentType: {
        type: [Number,String],
        default: '',
      },
    },
    data() {
      return {
        imgUrl: this.$imgSrc,
        index: '',
        List: [],
        xuan: 0,
        curTop: 300,
        selectedItems: [], //选择的岗位
        // chages1: [],
        loding: true,
        type: '',
      }
    },
    computed: {
      ...mapGetters(['statusBarHeight1', 'userinfo']),
    },
    // onLoad(options) {
    //   this.index = options.index;
    //   if (options.type) {
    //     this.type = options.type;
    //   }
    //   this.changes = uni.getStorageSync("zwlbss_key");
    //   uni.removeStorageSync("zwlbss_key");
    //   this.getData();
    //   /* #ifdef H5 */
    //   this.jinzhi();
    //   /* #endif */
    // },
    methods: {
      confirmData() {
        this.$emit('confirmData', this.selectedItems)
      },
      reset() {
        this.$emit('reset')
      },
      confirm() {
        this.$emit('confirm')
      },
      closeDrawer() {
        this.$emit('closeDrawer')
      },
      // 反选
      fanxuan() {
        this.selectedItems = uni.getStorageSync('jobSelectValue') || []
        this.selectedItems.forEach((item) => {
          let arr = item.split(',')
          this.List.forEach((v) => {
            if (v.lableName == arr[0]) {
              v.children.forEach((s) => {
                if (s.lableName == arr[1]) {
                  s.children.forEach((j) => {
                    if (j.lableName == arr[2]) {
                      j.active = true
                    }
                  })
                }
              })
            }
          })
        })
        this.List.forEach((v) => {
          let SL = 0
          v.children.forEach((s) => {
            s.children.forEach((j) => {
              if (j.active) {
                SL = SL + 1
              }
            })
          })
          v.quantity = SL
        })
      },
      getData() {
        let that = this
        this.$myRequest
          .get('/api/mobile/personnelOwner/getWholeIndustryType', {
            recruitmentType: this.index,
          })
          .then((res) => {
            // debugger;
            res.industryTypeList.forEach((v) => {
              v.quantity = 0
              v.children.forEach((s) => {
                s.children.forEach((j) => {
                  j.active = false
                })
              })
            })
            this.List = res.industryTypeList
            this.fanxuan()
            // that.$nextTick(() => {
            // 	setTimeout(() => {
            // 		this.loding = false;
            // 		this.lbHeight();
            // 	}, 500);
            // });
          })
      },
      xuanzhong(index) {
        this.xuan = index
      },
      labelChage(j, y) {
        let montage1 = this.List[this.xuan].children[j].children[y].lableName
        if (this.type) {
          let pages = getCurrentPages()
          let prevPage = pages[pages.length - 2]
          prevPage.$vm.positionCategorys = montage1
          // prevPage.$vm.ZWLX = this.changes
          this.fanhui()
          return
        }
        let montage =
          this.List[this.xuan].lableName +
          ',' +
          this.List[this.xuan].children[j].lableName +
          ',' +
          this.List[this.xuan].children[j].children[y].lableName
        if (
          !this.List[this.xuan].children[j].children[y].active &&
          this.selectedItems.length >= 3
        ) {
          uni.showToast({
            title: '选择数量已达到上限！',
            icon: 'none',
            mask: true,
          })
          return
        }
        this.List[this.xuan].children[j].children[y].active =
          !this.List[this.xuan].children[j].children[y].active

        if (this.List[this.xuan].children[j].children[y].active) {
          this.selectedItems.push(montage)
        } else {
          let index = this.selectedItems.indexOf(montage)
          this.selectedItems.splice(index, 1)
        }
        this.List.forEach((v) => {
          let SL = 0
          v.children.forEach((s) => {
            s.children.forEach((j) => {
              if (j.active) {
                SL = SL + 1
              }
            })
          })
          v.quantity = SL
        })
        //this.lbHeight();
      },
      del(item) {
        let index = this.selectedItems.indexOf(item)
        this.selectedItems.splice(index, 1)
        let arr = item.split(',')
        this.List.forEach((v) => {
          if (v.lableName == arr[0]) {
            v.children.forEach((s) => {
              if (s.lableName == arr[1]) {
                s.children.forEach((j) => {
                  if (j.lableName == arr[2]) {
                    j.active = false
                  }
                })
              }
            })
          }
        })
        this.List.forEach((v) => {
          let SL = 0
          v.children.forEach((s) => {
            s.children.forEach((j) => {
              if (j.active) {
                SL = SL + 1
              }
            })
          })
          v.quantity = SL
        })
        this.lbHeight()
      },
      // 获取轮播高度
      lbHeight() {
        let that = this
        this.$nextTick(function () {
          uni
            .createSelectorQuery()
            .in(this)
            .select('.select')
            .boundingClientRect((result) => {
              if (result) {
                that.curTop = result.top
              }
            })
            .exec()
        })
      },
      jinzhi() {
        let _this = this
        let param = window.location.href.split('#')[0]
        uni.request({
          method: 'post',
          data: {
            url: param,
          },
          header: {
            'content-type': 'application/x-www-form-urlencoded',
          },
          url: 'https://www.bangbangtongcheng.com/conven//mob/login/getJsTicket.do',
          success(re) {
            _this.jinzhifx(re.data)
          },
        })
      },
      jinzhifx(data) {
        wxshare.config({
          debug: false, //是否打开调试
          appId: data.appId, // 公众号的唯一标识
          timestamp: data.timestamp, // 生成签名的时间戳
          nonceStr: data.nonce, // ，生成签名的随机串
          signature: data.signature, // 签名
          jsApiList: ['hideMenuItems'],
        })
        // 禁止分享
        wxshare.hideMenuItems({
          // 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮，所有menu项见附录3
          menuList: [
            'menuItem:share:appMessage',
            'menuItem:share:timeline',
            'menuItem:share:timeline',
            'menuItem:share:qq',
            'menuItem:favorite',
            'menuItem:share:QZone',
            'menuItem:openWithSafari',
          ],
        })
      },
      fanhui() {
        uni.navigateBack({
          delta: 1,
        })
      },
    },
    created() {
      // 避免直接修改子组件的prop
      this.selectedItems = this.changes
      /* #ifdef H5 */
      this.jinzhi()
      /* #endif */
    },
    mounted() {
      this.getData();
    },
    onShow() {},
    watch: {
      selectedItems: {
        handler(newVal) {
          //console.log('this.changes',this.changes)
          uni.setStorageSync('jobSelectValue', this.selectedItems)
          //   this.chages1 = newVal.map((el) => {
          //     return el.split(',')[2]
          //   })
          //console.log('this.chages1',this.chages1)
        },
      },
      visible: {
        handler(newVal) {
          this.getData()
          if (newVal == true) {
            this.$emit('openDrawer')
          }
        },
      },
      recruitmentType: {
        handler(val){
          this.index = val;
          console.log(this.index);
        },
        deep: !0,
        immediate: !0,
      },
    },
    onUnload() {
      if (this.type) return
      let pages = getCurrentPages()
      let prevPage = pages[pages.length - 2]
      prevPage.$vm.ZWLX = this.changes
    },
    onBackPress() {},
  }
</script>

<style lang="less" scoped>
  .drawer-popup {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000000;
    width: 750rpx;
    overflow: hidden;
  }

  .drawer-mask {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
  }

  .drawer-content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background-color: #f5f7f9;
    transition: transform 0.3s ease-in-out;

    .drawer-header {
      padding: 0rpx 10px;
      background: white;
      display: flex;
      align-items: center;
      //justify-content: space-between;
      justify-content: start;
      font-weight: 500;
      font-size: 32rpx;
      color: #000000;
      height: 80rpx;
      line-height: 80rpx;

      .drawer-header-confirm {
        width: 140rpx;
        height: 48rpx;
        background: #0fa291;
        border-radius: 32rpx;
        font-weight: 500;
        font-size: 28rpx;
        color: #ffffff;
        line-height: 48rpx;
        text-align: center;
        margin-left: 30rpx;
      }

      image {
        width: 30rpx;
        height: 30rpx;
        margin: 0rpx !important;
        margin-right: 8rpx !important;
      }
    }
  }

  .drawer-floot {
  }

  .center {
    padding-bottom: 20rpx;
    border-radius: 20rpx;
    .list {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      background: #f5f7f9;
      padding: 20rpx;
      border-radius: 10rpx;

      .label {
        padding: 8rpx 20rpx;
        background: #ebebed;
        border-radius: 4rpx;
        font-weight: 400;
        font-size: 24rpx;
        color: #666666;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-right: 20rpx;
        position: relative;

        .image {
          position: absolute;
          width: 30rpx;
          height: 30rpx;
          top: -15rpx;
          right: -15rpx;
        }
      }
    }
  }

  .select {
    display: flex;

    .left {
      width: 198rpx;
      height: 100%;
      border-radius: 20rpx;
      overflow: hidden;
      .li {
        display: flex;
        align-items: center;
        padding: 14rpx;
        padding: 35rpx 14rpx;
        background: #f5f7f9;
        color: #333333;
        .lableName {
          width: 168rpx;
          font-size: 24rpx;
          font-weight: 400;
        }

        .quantity {
          font-size: 28rpx;
          font-weight: 500;
        }
      }

      .xuan {
        color: #64b6a8 !important;
      }
    }

    .right {
      flex: 1;
      height: 100%;

      .iteam {
        margin-left: 30rpx;

        .title {
          font-size: 36rpx;
          font-weight: 550;
          color: #333333;
          margin-bottom: 25rpx;
        }

        .label {
          display: flex;
          align-items: center;
          justify-content: space-between;
          flex-wrap: wrap;

          .li {
            width: 200rpx;
            height: 60rpx;
            background: #ffffff;
            border-radius: 10rpx;
            border: 1rpx solid #999999;
            font-size: 26rpx;
            font-weight: 500;
            color: #333333;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 20rpx;
          }

          .xuan {
            background: #e7f5f4;
            border: 1rpx solid #0fa291;
            color: #0fa291;

            background-image: url(https://pic.bangbangtongcheng.com/static/selectd-zhaocai-index.png);
            background-repeat: no-repeat;
            background-position: right bottom;
            background-size: 28rpx 28rpx;
          }
        }
      }
    }
  }

  .drawer-close {
    cursor: pointer;
  }

  .drawer-body {
    padding: 20rpx;
  }

  .dialog-fade-enter-active {
    animation: dialog-fade-in 0.4s;
  }

  .dialog-fade-leave-active {
    animation: dialog-fade-out 0.4s;
  }

  @keyframes dialog-fade-in {
    0% {
      transform: translate3d(0, -20px, 0);
      opacity: 0;
    }

    to {
      transform: translateZ(0);
      opacity: 1;
    }
  }

  @keyframes dialog-fade-out {
    0% {
      transform: translateZ(0);
      opacity: 1;
    }

    to {
      transform: translate3d(0, -20px, 0);
      opacity: 0;
    }
  }
</style>
